<template>
    <el-form :rules="registerForm.rules" class="login-container" label-position="left"
             :model="registerForm.form" label-width="120px" ref="rForm" v-loading="registerForm.loading">
        <h3 class="login_title">用户注册</h3>
        <el-form-item label="用户名" prop="username">
            <el-input type="username" v-model="registerForm.form.username" autocomplete="off" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="registerForm.form.password" autocomplete="off" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
            <el-input type="password" v-model="registerForm.form.rePassword" autocomplete="off" placeholder="确认新密码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="register">注册</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    export default {
        data(){
            const validateRePass = (rule, value, callback) => {
                if (value !== this.registerForm.form.password) {
                    callback(new Error('两次输入密码不一致!'));
                }else {
                    callback();
                }
            };
            return {
                registerForm: {
                    loading: false,
                    form:{
                        username:'',
                        password: '',
                        rePassword: '',
                    },
                    rules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' },
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { min: 3, message: '长度不少于 3 ', trigger: 'blur' },
                        ],
                        rePassword: [
                            { required: true, message: '请输入确认密码', trigger: 'blur' },
                            { min: 3, message: '长度不少于 3 ', trigger: 'blur' },
                            { validator: validateRePass, trigger: 'blur' }
                        ],
                    },
                },
            }
        },
        methods:{
            register(){
                const _this = this;
                this.$refs.rForm.validate((valid) => {
                    if (valid) {
                        let params={
                            username:_this.registerForm.form.username,
                            password: _this.registerForm.form.password,
                        };
                        _this.registerForm.loading=true;
                        _this.postRequestJson("/user/register",params)
                            .then(resp =>{
                                if (resp && resp.data && resp.data.code === '200') {
                                    //更新用户邮箱信息
                                    _this.registerForm.loading=false;
                                    _this.registerForm.visible=false;
                                    //清空数据
                                    _this.initField(_this.registerForm.form);
                                    _this.$message.success("注册成功");
                                    _this.$router.push('/login');
                                }else{
                                    _this.registerForm.loading=false;
                                }
                            })
                    }
                });
            },

        }
    }
</script>
<style  scoped>
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .login_title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }
    .login_remember {
        margin: 0px 0px 35px 0px;
        text-align: left;
    }
</style>